<template>
  <div class="login">
    <div class="wrapper">
      <div class="title">
        <div class="title-header">
          <img
            src="http://xmall.exrick.cn/static/images/smartisan_4ada7fecea.png"
            alt=""
          />
          <h4>使用 XMall 账号 登录官网</h4>
        </div>
        <div class="title-bottom">
          <form action="#" class="">
            <input
              type="text"
              class="input-username"
              placeholder="输入用户名"
              v-model="phone"
            />
            <input
              type="password"
              class="input-username"
              placeholder="输入密码"
              v-model="password"
            />
            <Slider status="status"></Slider>
            <div class="operation">
              <div class="Remember">
                <input type="checkbox" class="input-checkbox" />
                <span class="pass">记住密码</span>
              </div>
              <div class="Forgot">
                <a href="#">忘记密码 ?</a>
              </div>
              <div class="register">
                <router-link to="/registered">注册XMall账号</router-link>
                <!-- <a href="#">注册XMall账号</ a> -->
              </div>
            </div>
          </form>
          <button class="logIn" @click="handlerLogin">
            登录
          </button>
          <button class="backTo">
            返回
          </button>
          <div class="Horizontal"></div>
          <div class="footer">
            <div class="other">其它账号登录:</div>
            <img
              src="http://xmall.exrick.cn/static/images/other-login.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Slider from '@/components/Slider'
export default {
  name: "Login",
  data() {
    return {
      phone: "",
      password: "",
      code:'',
      status: false
    };
  },
  components: {
		Slider
	},
  methods: {
    //点击登录
    async handlerLogin() {
      const { phone, password } = this;
      if (phone && phone.trim().length === 11 && password.trim()) {
        try {
          const result = await this.$store.dispatch("getToken", {
            phone,
            password,
          });
          if (result === "获取token成功") {
            this.$router.push("/home")
          } else {
            alert("登录失败:手机号或密码不正确");
            return;
          }
          let redirect = this.$route.query.redirect || '/'
          this.$router.push(redirect)
        } catch (error) {
          alert(error);
        }
        // this.$router.push("/home");
      } else {
        alert("手机号或密码不正确");
      }
    }
  },
};
</script>

<style lang="less" scoped>
.login {
  height: 1000px;
  background: url(http://xmall.exrick.cn/static/images/bg_9b9dcb65ff.png) repeat;
  min-width: 630px;
  border: 1px solid transparent;
  
  .wrapper {
    box-shadow: 0 9px 30px -6px rgb(0 0 0 / 20%),
      0 18px 20px -10px rgb(0 0 0 / 4%), 0 18px 20px -10px rgb(0 0 0 / 4%),
      0 10px 20px -10px rgb(0 0 0 / 4%);
    width: 450px;
    height: 700px;
    background-color: #fff;
    margin: 90px auto 0;
    border-radius: 10px;
    .title {
      width: 450px;
      .title-header {
        width: 450px;
        margin-bottom: 50px;
        img {
          display: block;
          margin: 0 auto;
        }
        h4 {
          font-size: 20px;
          font-weight: 400;
          text-align: center;
        }
      }
      .title-bottom {
        padding: 0 40px;       
        .input-username {
          outline: none;
          width: 370px;
          height: 50px;
          border-radius: 8px;
          border: 1px solid #ccc;
          text-align: left;
          margin-bottom: 15px;
          padding-left: 8px;
        }
        .verificationCode {
          display: block;
          text-align: right;
        }
        .operation {
          margin-top: 15px;
          height: 19px;
          line-height: 19px;
          .Remember {
            float: left;
            .input-checkbox {
              float: left;
              width: 18px;
              height: 18px;
              vertical-align: text-bottom;
              margin-bottom: 1px;
              *margin-bottom: -1px;
            }
            .pass {
              padding-left: 5px;
              font-size: 14px;
            }
          }
          .register {
            width: 100px;
            font-size: 14px;
            float: right;
            border-right: 1px solid #ccc;
            a {
              color: #5079d9;
            }
          }
          .Vertical {
            border-left: 1px solid #ccc;
          }
          .Forgot {
            float: right;
            margin-left: 10px;
            a {
              color: #5079d9;
            }
          }
        }
        .logIn {
          color: #fff;
          width: 372px;
          height: 50px;
          border-radius: 8px;
          border: 1px solid #5c81e3;
          background-color: #678ee7;
          font-size: 18px;
          margin-top: 25px;
          cursor: pointer;
          outline: none;
        }
        .backTo {
          outline: none;
          color: #000;
          cursor: pointer;
          width: 372px;
          height: 50px;
          border-radius: 8px;
          border: 1px solid #ccc;
          background-color: #fff;
          font-size: 18px;
          margin: 10px 0 10px;
        }
        .Horizontal {
          margin-top: 10px;
          border-top: 1px solid #ccc;
        }
        .footer {
          width: 370px;
          height: 40px;
          .other {
            float: left;
            margin-top: 20px;
            margin-right: 10px;
          }
          img {
            float: left;
            margin-top: 20px;
          }
        }
      }
    }
  }
}
</style>
